<template>
  <div id="orderSearchDiv">
    <div id="dataViewDiv">
      <div>
        <el-radio-group v-model="dataViewDate" @change="queryTradeOrderTotal()">
          <el-radio-button label="1">今天</el-radio-button>
          <el-radio-button label="2">最近三天</el-radio-button>
          <el-radio-button label="3">最近七天</el-radio-button>
          <el-radio-button label="4" class="el-radio-button-inner-datepicker">
            <el-date-picker
              v-model="dataViewRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @focus="focusPickerDate"
              @blur="changeDataViewDate"
              @change="changeDataViewDate"
            ></el-date-picker>
          </el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top:20px;">
        <div id="order_total_flex">
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                启动次数
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="在规定时间段内，用户打开应用的次数。“一次启动”是指用户从打开小程序开始，到退出小程序。"
                >
                  <el-button slot="reference" style="padding:0;border:0">
                    <i class="el-icon-question"></i>
                  </el-button>
                </el-popover>
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.payOrderNum }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                启动用户数
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="进入小程序页面的用户"
                >
                  <el-button slot="reference" style="padding:0;border:0">
                    <i class="el-icon-question"></i>
                  </el-button>
                </el-popover>
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.payMoney }}</span>
              </div>
            </div>
          </div>

          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                使用时长
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="用户进入小程序到退出小程序的停留时长"
                >
                  <el-button slot="reference" style="padding:0;border:0">
                    <i class="el-icon-question"></i>
                  </el-button>
                </el-popover>
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.returnOrderNum }}</span>
              </div>
            </div>
          </div>
        </div>
        <div id="order_total_flex" style="margin-top:20px">
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                低活跃度商家数
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="店铺没有第八代库存"
                >
                  <el-button slot="reference" style="padding:0;border:0">
                    <i class="el-icon-question"></i>
                  </el-button>
                </el-popover>
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.returnMoney }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                中活跃度商家数
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="店铺有第八代库存"
                >
                  <el-button slot="reference" style="padding:0;border:0">
                    <i class="el-icon-question"></i>
                  </el-button>
                </el-popover>
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.payerNum }}</span>
              </div>
            </div>
          </div>

          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                高活跃度商家数
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="店铺有第八代库存，第八代销售记录，且满足剩下的两种情况（下载活动名片次数、店铺人员信息完整）"
                >
                  <el-button slot="reference" style="padding:0;border:0">
                    <i class="el-icon-question"></i>
                  </el-button>
                </el-popover>
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.highStoreCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="form1" style="text-align:center;margin-top:30px;margin-left:35px">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        id="orderSearchForm"
      >
        <el-form-item label="　　店铺名称：">
          <el-input v-model="formInline.storeName" placeholder></el-input>
        </el-form-item>

        <el-form-item
          label="　　大区名称："
          v-if="orgType == 1 || orgType == 2"
        >
          <el-input v-model="formInline.upOrgZone" placeholder></el-input>
        </el-form-item>
        <el-form-item
          label="　　营销区域名称："
          v-if="orgType == 1 || orgType == 2 || orgType == 3"
        >
          <el-input v-model="formInline.baseName" placeholder></el-input>
        </el-form-item>

        <el-form-item label="　店铺授权码：">
          <el-input v-model="formInline.authCode" placeholder></el-input>
        </el-form-item>
        <el-form-item label="　　活跃度：">
          <el-select
            v-model="formInline.activation"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item, i) in orderStatusList"
              :key="i"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺人员信息是否完整：">
          <el-select
            v-model="formInline.isInfoComplete"
            placeholder="请选择"
            clearable
            style="width:167px;"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否下载最新活动名片：">
          <el-select
            v-model="formInline.newestActivityDownload"
            placeholder="请选择"
            clearable
            style="width:167px;"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用时长（分钟)：">
          <el-input
            style="width:75px;"
            v-model="formInline.startUseTime"
            placeholder
          ></el-input
          >至
          <el-input
            style="width:75px;"
            v-model="formInline.endUseTime"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="启动次数（次）：">
          <el-input
            style="width:75px;"
            v-model="formInline.startStartTimes"
            placeholder
          ></el-input
          >至
          <el-input
            style="width:75px;"
            v-model="formInline.endStartTimes"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="第八代库存数量(瓶)：">
          <el-input
            style="width:75px;"
            v-model="formInline.startStockCount"
            placeholder
          ></el-input
          >至
          <el-input
            style="width:75px;"
            v-model="formInline.endStockCount"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="第八代销售数量（瓶）：">
          <el-input
            style="width:75px;"
            v-model="formInline.startSellCount"
            placeholder
          ></el-input
          >至
          <el-input
            style="width:75px;"
            v-model="formInline.endSellCount"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="下载活动名片次数（次）：">
          <el-input
            style="width:75px;"
            v-model="formInline.startActivityCardDownloadCount"
            placeholder
          ></el-input
          >至
          <el-input
            style="width:75px;"
            v-model="formInline.endActivityCardDownloadCount"
            placeholder
          ></el-input>
        </el-form-item>

        <div
          id="multiBtnDiv"
          style="width:400px;display:inline-block;text-align:center"
        >
          <el-button
            type="primary"
            @click="search()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="kong()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          >
          <el-button
            type="success"
            @click="exportExcel1()"
            size="mini"
            icon="el-icon-s-data"
            :loading="exportLoading"
            >导出</el-button
          >
        </div>
      </el-form>
    </div>

    <div class="table1">
      <!-- <el-table
                id="rebateSetTable"
                ref="table1"
                key="table1"
                tooltip-effect="dark"
                v-loading="loading"
                :data="tableData"
                max-height="500px"scope.row[dropCol[index].prop==='1' ? "低" : scope.row[dropCol[index].prop==='2'? "中" : "高"
                border
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            > -->
      <el-table
        :data="tableData"
        border
        row-key="id"
        align="left"
        max-height="500px"
        @sort-change="handleSort"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in col"
          :key="`col_${index}`"
          :prop="dropCol[index].prop"
          :width="dropCol[index].width"
          :label="item.label"
          :sortable="item.sortable"
        >
          <template slot-scope="scope">
            <div v-if="dropCol[index].prop === 'activation'">
              <div v-if="scope.row.activation != null">
                <!-- {{scope.row.activation===1?"是" : "否"}} -->
                <span v-if="scope.row.activation == 1">低</span>
                <span v-if="scope.row.activation == 2">中</span>
                <span v-if="scope.row.activation == 3">高</span>
              </div>
            </div>
            <div v-if="dropCol[index].prop === 'newestActivityDownload'">
              <div v-if="scope.row.newestActivityDownload != null">
                {{ scope.row.newestActivityDownload === 1 ? '是' : '否' }}
              </div>
            </div>
            <div v-if="dropCol[index].prop === 'isInfoComplete'">
              <div v-if="scope.row.isInfoComplete != null">
                {{ scope.row.isInfoComplete === 1 ? '是' : '否' }}
              </div>
            </div>
            <span
              v-if="
                dropCol[index].prop !== 'activation' &&
                  dropCol[index].prop != 'newestActivityDownload' &&
                  dropCol[index].prop != 'isInfoComplete'
              "
              >{{ scope.row[dropCol[index].prop] }}</span
            >
          </template>
        </el-table-column>

        <!-- <el-table-column
                    prop="upOrgZone"
                    label="大区名称"
                    width="180"
                    align="center"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="baseName" label="营销区域名称" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column
                    prop="storeName"
                    label="店铺名称"
                    width="180"
                    align="left"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="authCode" label="店铺授权码" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="activation" label="活跃度" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.activation == '1'">低</span>
                        <span v-if="scope.row.activation == '2'">中</span>
                        <span v-if="scope.row.activation == '3'">高</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="stockCount"
                    label="第八代库存数量（瓶）"
                    align="center"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="sellCount"
                    label="第八代 销售数量（瓶）"
                    align="center"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="newestActivityDownload"
                    label="是否下载最新活动名片"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.newestActivityDownload == 1 ? "是" : "否" }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="activityCardDownloadCount"
                    label="下载活动名片次数（次）"
                    align="center"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="isInfoComplete"
                    label="店铺人员信息是否完整"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.isInfoComplete == 1 ? "是" : "否" }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="useTime"
                    label="使用时长（分钟)"
                    align="center"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="startTimes"
                    label="启动次数（次）"
                    align="center"
                    show-overflow-tooltip
                ></el-table-column> -->
      </el-table>
      <el-form :inline="true" :model="formInline">
        <el-form-item style="margin-top: 0px;"></el-form-item>
      </el-form>
      <div class="block" style="margin-top:-22px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
          :current-page="listQuery.current"
          :page-size="listQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!--列表配置-->
    <el-dialog
      title="列表配置"
      :visible.sync="configTableDialogVisible"
      width="50%"
      @close="closeConfigTableDialog()"
    >
      <div id="configTableDiv">
        <el-form :inline="true" :model="formInline2" class="demo-form-inline">
          <el-form-item label="选择列表字段：">
            <el-checkbox
              :indeterminate="formInline2.isIndeterminate"
              v-model="formInline2.isAll"
              style="margin-top:10px;"
              @change="isAllFieldChange"
              >全选</el-checkbox
            >
          </el-form-item>
          <el-divider></el-divider>
          <el-checkbox-group
            v-model="userMenuShowFields"
            @change="isSingleFieldChange"
          >
            <el-checkbox
              v-for="item in userMenuFieldList"
              :label="item.fieldCode"
              :key="item.fieldCode"
              style="margin:15px 10px;width:120px;"
              >{{ item.fieldName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form>
        <el-row>
          <el-col :span="24" style="text-align: center;margin-top: 30px">
            <el-button type="info" @click="closeConfigTableDialog()" size="mini"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="insertUserFieldRelation()"
              size="mini"
              >确 认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { getmemberrule } from '@/api/membergrade';
import {
  queryTradeOrderTotalone,
  queryTradeOrderByParamone,
  queryTradeOrderByParamNoPage,
  excelTradeOrderByParamone,
  queryTradeOrderPayInfo,
  queryTradeOrderItemList,
  queryUserMenuFieldByParam,
  insertUserFieldRelation,
} from '@/api/tradeOrderSearch';
import qs from 'qs';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

const curDateStr = function() {
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : '0' + month;
  var date = curDate.getDate(0);
  date = date > 9 ? date : '0' + date;
  return year + '-' + month + '-' + date;
};
const curDateStr3 = function() {
  var curTime = new Date().getTime();
  var startDate = curTime - 3 * 3600 * 24 * 1000;
  startDate = new Date(startDate);
  var year = startDate.getFullYear();
  var month = startDate.getMonth() + 1;
  month = month > 9 ? month : '0' + month;
  var date = startDate.getDate(0);
  date = date > 9 ? date : '0' + date;
  return year + '-' + month + '-' + date;
};
const curDateStr7 = function() {
  var curTime = new Date().getTime();
  var startDate = curTime - 7 * 3600 * 24 * 1000;
  startDate = new Date(startDate);
  var year = startDate.getFullYear();
  var month = startDate.getMonth() + 1;
  month = month > 9 ? month : '0' + month;
  var date = startDate.getDate(0);
  date = date > 9 ? date : '0' + date;
  return year + '-' + month + '-' + date;
};

export default {
  data() {
    return {
      logininfo: '',
      orgSeq: '',
      orgType: '',
      loading: true,
      exportLoading: false,
      insertLoading: false,
      dataViewDate: '1',
      dataViewRange: '',
      totalData: {
        orderNum: 0,
        payOrderNum: 0,
        returnOrderNum: 0,
        orderFinishNum: 0,
        orderAcceptNum: 0,
        orderPostNum: 0,
        orderCancelNum: 0,
        payMoney: 0,
        returnMoney: 0,
        payerNum: 0,
        highStoreCount: 0,
      },
      orderStatusList: [
        {
          id: '1',
          name: '低',
        },
        {
          id: '2',
          name: '中',
        },
        {
          id: '3',
          name: '高',
        },
      ], //订单状态
      returnStatusList: [
        {
          id: '0',
          name: '正常单',
        },
        {
          id: '1',
          name: '被退货单',
        },
        {
          id: '2',
          name: '退货单',
        },
      ], //退货状态
      customizeStatusList: [
        {
          id: '1',
          name: '审核中',
        },
        {
          id: '2',
          name: '已驳回',
        },
        {
          id: '3',
          name: '审核成功待生产',
        },
        {
          id: '4',
          name: '生产中',
        },
        {
          id: '5',
          name: '生产完成待配送',
        },
        {
          id: '6',
          name: '已配送',
        },
      ], //定制状态1审核中/2已驳回/3审核成功待生产/4生产中/5生产完成待配送/6已配送
      payMethodList: [
        {
          id: '0',
          name: '云店线下',
        },
        {
          id: '1',
          name: '线上支付',
        },
        {
          id: '2',
          name: 'pos线下支付',
        },
        {
          id: '3',
          name: '微信',
        },
        {
          id: '4',
          name: '支付宝',
        },
        {
          id: '5',
          name: '银行卡',
        },
      ],
      gradelevelOptions: [], //会员等级
      formInline: {
        orderNo: '',
        activation: '',
        returnStatus: '',
        customizeStatus: '',
        startUseTime: '',
        endUseTime: '',
        startStockCount: '',
        endStartTimes: '',
        startStartTimes: '',
        startSellCount: '',
        startActivityCardDownloadCount: '',
        endActivityCardDownloadCount: '',
        endStockCount: '',
        endSellCount: '',
        endUseTime: '',
        dateRange: [curDateStr(), curDateStr()],
        shopId: '',
        storeName: '',
        shopOwnerName: '',
        warzoneId: '',
        upOrgZone: '',
        baseId: '',
        baseName: '',
        gradelevelId: '',
        memberName: '',
        memberPhone: '',
        goodsName: '',
        payMethod: '',
        authCode: '',
        isInfoComplete: '',
        newestActivityDownload: '',
        isGiftOrder: '',
        isFeastOrder: '',
        goodsStyle: '',
        ascs: [],
        desc: [],
      },
      expandRowKeys: [],
      tableData: [], //订单列表数据
      tableDataExcel: [], //导出数据
      payData: [], //支付列表数据
      itemData: [], //商品列表数据
      total: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      sort: '',
      order: '',
      configTableDialogVisible: false, //列表配置弹窗状态
      formInline2: {
        isIndeterminate: false, //是否半选中
        isAll: true, //是否全部显示,
        menuCode: 'customizeOrderSearch',
      },
      userMenuFieldList: [], //全部列名列表
      userMenuAllFields: [], //全部的列名
      userMenuShowFields: [], //显示的列名
      col: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '营销区域名称',
          prop: 'baseName',
        },
        {
          label: '店铺名称',
          prop: 'storeName',
        },
        {
          label: '店铺授权码',
          prop: 'authCode',
        },
        {
          label: '活跃度',
          prop: 'activation',
        },
        {
          label: '第八代库存数量（瓶）',
          prop: 'stockCount',
          sortable: 'stock_count',
        },
        {
          label: '第八代 销售数量（瓶）',
          prop: 'sellCount',
          sortable: 'sell_count',
        },
        {
          label: '是否下载最新活动名片',
          prop: 'newestActivityDownload',
        },
        {
          label: '下载活动名片次数（次）',
          prop: 'activityCardDownloadCount',
          sortable: 'activity_card_download_count',
        },
        {
          label: '店铺人员信息是否完整',
          prop: 'isInfoComplete',
        },
        {
          label: '使用时长（分钟)',
          prop: 'useTime',
          sortable: 'use_time',
        },
        {
          label: '启动次数（次）',
          prop: 'startTimes',
          sortable: 'start_times',
        },
      ],
      dropCol: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '营销区域名称',
          prop: 'baseName',
        },
        {
          label: '店铺名称',
          prop: 'storeName',
        },
        {
          label: '店铺授权码',
          prop: 'authCode',
        },
        {
          label: '活跃度',
          prop: 'activation',
        },
        {
          label: '第八代库存数量（瓶）',
          prop: 'stockCount',
        },
        {
          label: '第八代 销售数量（瓶）',
          prop: 'sellCount',
        },
        {
          label: '是否下载最新活动名片',
          prop: 'newestActivityDownload',
        },
        {
          label: '下载活动名片次数（次）',
          prop: 'activityCardDownloadCount',
        },
        {
          label: '店铺人员信息是否完整',
          prop: 'isInfoComplete',
        },
        {
          label: '使用时长（分钟)',
          prop: 'useTime',
        },
        {
          label: '启动次数（次）',
          prop: 'startTimes',
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近3天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
        /*
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) {
            this.pickerMinDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const day30 = 30 * 24 * 3600 * 1000
            let maxTime = this.pickerMinDate + day30
            if (maxTime > new Date()) {
              maxTime = new Date()
            }
            return time.getTime() > maxTime
          }
          return time.getTime() > Date.now()
        }
        */
      },
    };
  },
  mounted() {
    this.logininfo = localStorage.getItem('logininfo');
    let orgJson = JSON.parse(this.logininfo);
    if (
      orgJson != null &&
      orgJson.orgList != null &&
      orgJson.orgList.length > 0
    ) {
      this.orgSeq = orgJson.orgList[0].orgSeq;
      this.orgType = orgJson.orgList[0].orgType;
    }
    if (this.orgType == 2) {
      //大区
      this.formInline.warzoneId = this.orgSeq;
    } else if (this.orgType == 3) {
      //营销区域
      this.formInline.baseId = this.orgSeq;
    } else if (this.orgType == 4) {
      //门店
      this.formInline.shopId = this.orgSeq;
    }
    this._getmemberinfo(); //加载等级

    var orderSearchParam = sessionStorage.getItem('orderSearchParam');
    var pageFrom = sessionStorage.getItem('pageFrom');
    if (orderSearchParam != null && pageFrom == 'customizeOrderDetail') {
      orderSearchParam = JSON.parse(orderSearchParam);
      this.formInline = orderSearchParam.formInline;
      this.listQuery = orderSearchParam.listQuery;
      this.total = orderSearchParam.total;
    }
    sessionStorage.removeItem('orderSearchParam');
    sessionStorage.removeItem('pageFrom');
    this.queryUserMenuFieldByParam(); //加载列表配置字段
    this.queryTradeOrderTotal(); //加载看板头部信息
    this.queryTradeOrderByParam(); //加载订单列表
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    this.columnDrop();
  },
  filters: {
    numFilter(value) {
      let realVal = '';
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后2位
        realVal = parseFloat(value).toFixed(2);
      } else {
        realVal = '--';
      }
      return realVal;
    },
  },
  methods: {
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex - 1];
          this.dropCol.splice(evt.oldIndex - 1, 1);
          this.dropCol.splice(evt.newIndex - 1, 0, oldItem);
        },
      });
    },
    //客户等级获取
    _getmemberinfo() {
      let data = {
        size: 99,
        current: 1,
        condition: {},
        ascs: [],
        descs: [],
      };
      getmemberrule(data).then((res) => {
        this.gradelevelOptions = res.records;
      });
    },
    //点击空白日期初始化
    focusPickerDate() {
      this.dataViewRange = '';
    },
    //点击头部时间选择切换为日期状态
    changeDataViewDate() {
      this.dataViewDate = '4';
      this.queryTradeOrderTotal();
    },
    /*头部看板*/
    queryTradeOrderTotal() {
      console.log(this.dataViewRange, 'kkkk');
      let beginDate = '';
      let endDate = '';
      if (
        this.dataViewDate == '4' &&
        this.dataViewRange != null &&
        this.dataViewRange.length == 2
      ) {
        beginDate = this.dataViewRange[0];
        endDate = this.dataViewRange[1];
      } else if (this.dataViewDate == '1') {
        beginDate = curDateStr();
        endDate = curDateStr();
      } else if (this.dataViewDate == '2') {
        beginDate = curDateStr3();
        endDate = curDateStr();
      } else if (this.dataViewDate == '3') {
        beginDate = curDateStr7();
        endDate = curDateStr();
      } else {
        this.dataViewRange = '';
      }
      let data = {
        beginDate: beginDate,
        endDate: endDate,
      };
      queryTradeOrderTotalone(data).then((res) => {
        if (res != null) {
          this.totalData.orderNum = res.result.orderNum;
          this.totalData.payOrderNum = res.result.startTimes;
          this.totalData.returnOrderNum = this.formateSeconds(
            res.result.useTime * 60
          );
          this.totalData.orderFinishNum = res.result.orderFinishNum;
          this.totalData.orderAcceptNum = res.result.orderAcceptNum;
          this.totalData.orderPostNum = res.result.orderPostNum;
          this.totalData.orderCancelNum = res.result.orderCancelNum;
          this.totalData.payMoney = res.result.userCount; //(res.result.payMoney + res.result.returnMoney).toFixed(2);
          this.totalData.returnMoney = res.result.lowStoreCount;
          this.totalData.payerNum = res.result.middleStoreCount;
          this.totalData.highStoreCount = res.result.highStoreCount;
        }
      });
    },
    /*订单列表*/
    queryTradeOrderByParam() {
      if (
        this.formInline.dateRange == null ||
        this.formInline.dateRange.length == 0
      ) {
        this.formInline.dateRange = ['', ''];
      }
      let data = {
        current: this.listQuery.current,
        size: this.listQuery.size,
        condition: {
          isReturn: 0, //退款订单为1，正常订单为0
          isCustomizeOrder: 1, //定制订单为1，普通订单为0
          orderNo: this.formInline.orderNo.trim(),
          activation: this.formInline.activation,
          returnStatus: this.formInline.returnStatus,
          startUseTime: this.formInline.startUseTime,

          endUseTime: this.formInline.endUseTime,

          startStockCount: this.formInline.startStockCount,
          endStartTimes: this.formInline.endStartTimes,
          startStartTimes: this.formInline.startStartTimes,
          startSellCount: this.formInline.startSellCount,
          startActivityCardDownloadCount: this.formInline
            .startActivityCardDownloadCount,
          endActivityCardDownloadCount: this.formInline
            .endActivityCardDownloadCount,
          endStockCount: this.formInline.endStockCount,
          endSellCount: this.formInline.endSellCount,
          endUseTime: this.formInline.endUseTime,
          beginDate: this.formInline.dateRange[0],
          endDate: this.formInline.dateRange[1],
          shopId: this.formInline.shopId.trim(),
          storeName: this.formInline.storeName.trim(),
          shopOwnerName: this.formInline.shopOwnerName.trim(),
          warzoneId: this.formInline.warzoneId.trim(),
          upOrgZone: this.formInline.upOrgZone.trim(),
          baseId: this.formInline.baseId.trim(),
          baseName: this.formInline.baseName.trim(),
          gradelevelId: this.formInline.gradelevelId,
          memberName: this.formInline.memberName.trim(),
          memberPhone: this.formInline.memberPhone.trim(),
          goodsName: this.formInline.goodsName.trim(),
          payMethod: this.formInline.payMethod,
          authCode: this.formInline.authCode.trim(),
          isInfoComplete: this.formInline.isInfoComplete,
          newestActivityDownload: this.formInline.newestActivityDownload,
          isGiftOrder: this.formInline.isGiftOrder,
          isFeastOrder: this.formInline.isFeastOrder,
          goodsStyle: this.formInline.goodsStyle,
        },
        ascs: this.formInline.ascs,
        desc: this.formInline.desc,
      };
      queryTradeOrderByParamone(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.queryTradeOrderByParam();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.queryTradeOrderByParam();
    },
    //查询
    search() {
      this.listQuery.current = 1;
      this.queryTradeOrderByParam();
    },
    //清空
    kong() {
      this.formInline.orderNo = '';
      this.formInline.activation = '';
      this.formInline.returnStatus = '';
      this.formInline.startUseTime = '';
      this.formInline.endUseTime = '';

      this.formInline.startStockCount = '';
      this.formInline.endStartTimes = '';

      this.formInline.startStartTimes = '';
      this.formInline.startSellCount = '';
      this.formInline.startActivityCardDownloadCount = '';
      this.formInline.endActivityCardDownloadCount = '';

      this.formInline.endStockCount = '';

      this.formInline.endSellCount = '';
      this.formInline.endUseTime = '';
      this.formInline.dateRange = [curDateStr(), curDateStr()];
      this.formInline.storeName = '';
      this.formInline.shopOwnerName = '';
      this.formInline.upOrgZone = '';
      this.formInline.baseName = '';
      this.formInline.gradelevelId = '';
      this.formInline.memberName = '';
      this.formInline.memberPhone = '';
      this.formInline.goodsName = '';
      this.formInline.payMethod = '';
      this.formInline.authCode = '';
      this.formInline.isInfoComplete = '';
      this.formInline.newestActivityDownload = '';
      this.formInline.isGiftOrder = '';
      this.formInline.isFeastOrder = '';
      this.formInline.goodsStyle = '';
      this.formInline.ascs = [];
      this.formInline.desc = [];
    },
    //流导出
    exportExcel1() {
      let beginDate = '';
      let endDate = '';
      if (
        this.formInline.dateRange != null &&
        this.formInline.dateRange.length == 2
      ) {
        beginDate = this.formInline.dateRange[0];
        endDate = this.formInline.dateRange[1];
      } else {
        this.formInline.dateRange = '';
      }
      let data = {
        isReturn: 0, //退款订单为1，正常订单为0
        isCustomizeOrder: 1, //定制订单为1，普通订单为0
        orderNo: this.formInline.orderNo.trim(),
        activation: this.formInline.activation,
        returnStatus: this.formInline.returnStatus,
        startUseTime: this.formInline.startUseTime,

        endUseTime: this.formInline.endUseTime,

        startStockCount: this.formInline.startStockCount,
        endStartTimes: this.formInline.endStartTimes,
        startStartTimes: this.formInline.startStartTimes,
        startSellCount: this.formInline.startSellCount,
        startActivityCardDownloadCount: this.formInline
          .startActivityCardDownloadCount,
        endActivityCardDownloadCount: this.formInline
          .endActivityCardDownloadCount,
        endStockCount: this.formInline.endStockCount,
        endSellCount: this.formInline.endSellCount,
        endUseTime: this.formInline.endUseTime,
        beginDate: this.formInline.dateRange[0],
        endDate: this.formInline.dateRange[1],
        shopId: this.formInline.shopId.trim(),
        storeName: this.formInline.storeName.trim(),
        shopOwnerName: this.formInline.shopOwnerName.trim(),
        warzoneId: this.formInline.warzoneId.trim(),
        upOrgZone: this.formInline.upOrgZone.trim(),
        baseId: this.formInline.baseId.trim(),
        baseName: this.formInline.baseName.trim(),
        gradelevelId: this.formInline.gradelevelId,
        memberName: this.formInline.memberName.trim(),
        memberPhone: this.formInline.memberPhone.trim(),
        goodsName: this.formInline.goodsName.trim(),
        payMethod: this.formInline.payMethod,
        authCode: this.formInline.authCode.trim(),
        isInfoComplete: this.formInline.isInfoComplete,
        newestActivityDownload: this.formInline.newestActivityDownload,
        isGiftOrder: this.formInline.isGiftOrder,
        isFeastOrder: this.formInline.isFeastOrder,
        goodsStyle: this.formInline.goodsStyle,
      };
      this.exportLoading = true;
      excelTradeOrderByParamone(data).then((res) => {
        this.exportLoading = false;
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const link = document.createElement('a');
        link.style = 'display:none';
        link.href = URL.createObjectURL(blob);
        link.download =
          new Date().toLocaleDateString() + '商家端活跃度查询记录表.xlsx';
        document.body.appendChild(link);
        link.click();
      });
    },
    //数字格式化
    fixData(row, column, cellValue, index) {
      if (cellValue != null && !isNaN(cellValue)) {
        if (cellValue < 0) {
          return '0.00';
        } else {
          return cellValue.toFixed(2);
        }
      } else {
        return cellValue;
      }
    },
    //显示配置弹窗
    showConfigTableDialog() {
      this.configTableDialogVisible = true;
    },
    //关闭配置弹窗
    closeConfigTableDialog() {
      this.queryUserMenuFieldByParam();
      this.configTableDialogVisible = false;
    },
    //获取列表字段列表
    queryUserMenuFieldByParam() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.userMenuAllFields = []; //全部的列名
      this.userMenuShowFields = []; //显示的列名
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          this.userMenuAllFields.push(item.fieldCode);
          if (item.isShow == 1) {
            this.userMenuShowFields.push(item.fieldCode);
          }
        });
        if (
          this.userMenuShowFields.length == 0 ||
          this.userMenuShowFields.length == this.userMenuAllFields.length
        ) {
          this.userMenuShowFields = this.userMenuAllFields;
          this.formInline2.isAll = true;
        } else {
          this.formInline2.isAll = false;
          this.formInline2.isIndeterminate = true;
        }
      });
    },
    //保存显示字段
    insertUserFieldRelation() {
      if (
        this.userMenuShowFields == null ||
        this.userMenuShowFields.length == 0
      ) {
        this.$message({
          showClose: true,
          message: '列表字段不可为空',
          type: 'info',
        });
        return;
      }
      let data = {
        menuCode: this.formInline2.menuCode,
        fieldList: this.userMenuShowFields,
      };
      this.insertLoading = true;
      insertUserFieldRelation(data).then((res) => {
        this.insertLoading = false;
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success',
          });
          this.closeConfigTableDialog();
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error',
          });
        }
      });
    },
    //是否全选字段
    isAllFieldChange(val) {
      this.userMenuShowFields = val ? this.userMenuAllFields : [];
      this.formInline2.isIndeterminate = false;
    },
    //是否选中单个字段
    isSingleFieldChange(val) {
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
    },
    //获取字段勾选状态
    getUserMenuFieldStatus(fieldCode) {
      if (this.userMenuShowFields != null) {
        for (let i = 0; i < this.userMenuShowFields.length; i++) {
          if (this.userMenuShowFields[i] == fieldCode) {
            return true;
          }
        }
        return false;
      }
    },
    //是否显示字段
    isShow(fieldCode) {
      if (this.formInline2.isAll || this.getUserMenuFieldStatus(fieldCode)) {
        return true;
      } else {
        return false;
      }
    },
    //将分秒转化为时分秒
    formateSeconds(endTime) {
      let secondTime = parseInt(endTime);
      let min = 0;
      let h = 0;
      let result = '';
      if (secondTime > 60) {
        min = parseInt(secondTime / 60);
        secondTime = parseInt(secondTime % 60);
        if (min > 60) {
          h = parseInt(min / 60);
          min = parseInt(min % 60);
        }
      }
      result = `${h.toString().padStart(2, '0')}:${min
        .toString()
        .padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
      return result;
    },
    handleSort(val) {
      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        this.formInline.ascs = [val.column.sortable];
        this.formInline.desc = [];
        this.search();
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        this.formInline.ascs = [];
        this.formInline.desc = [val.column.sortable];
        this.search();
      }
      console.log(val, sortModel);
    },
  },
  //其他
  computed: {},
};
</script>
<style scoped>
#orderSearchDiv .el-radio-button-inner-datepicker .el-radio-button__inner {
  padding: 0;
}
#orderSearchDiv .el-radio-button-inner-datepicker .el-input__inner {
  border: none;
  height: 38px;
}
#orderSearchDiv #orderSearchForm {
  margin-left: -30px;
  padding: 0;
  display: inline-block;
  text-align: left;
}
#orderSearchDiv .el-form--inline .el-form-item__content {
  width: 180px;
}
#orderSearchDiv .el-range-editor.el-input__inner {
  width: 250px;
}
#orderSearchDiv .el-dialog__body {
  padding-top: 0;
}
#order_total_flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
#order_total_flex .order_content {
  cursor: pointer;
  width: 350px;
  padding: 40px 0;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#order_total_flex .order_detail {
  width: 200px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#order_total_flex .order_content2 {
  width: 60px;
  cursor: pointer;
  padding: 10px 0;
  margin: 0 1px;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#order_total_flex .order_content .order_total_title {
  color: #000;
}
#order_total_flex .order_content .order_total_info {
  margin-top: 10px;
}
#order_total_flex .order_content .order_data {
  font-size: 1.4em;
  font-weight: bold;
}
#configTableDiv .el-divider--horizontal {
  margin-top: 0;
}
.el-icon-question {
  font-size: 21px;
  margin-left: 10px;
  display: inine-block;
}
</style>
